<template>
  <div class="qusetion">
    <el-row type="flex" justify="space-around" height="50" class="btn">
      <el-col>
        <el-row v-show="!questList">{{ val?'修改题库':'新建试题' }}</el-row>
      </el-col>
      <el-col>
        <el-row type="flex" justify="end">
          <el-button type="primary" plain @click="change">{{ questList?'新增试题':'返回列表' }}</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- <component :is="AddQuestion" /> -->
    <!-- <component :is="questList?QuestionList:AddQuestion" /> -->
    <QuestionList v-if="questList" @edit="edit" />
    <AddQuestion v-else ref="edit" :subject_detail="val" @change="questList=true" />

  </div>
</template>
<script>
import QuestionList from '@/components/QuestionList'
import AddQuestion from './addquestion/index.vue'
export default {
  name: 'Question',
  components: { QuestionList, AddQuestion },
  props: {},
  data() {
    return {
      questList: true,
      val: null
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    edit(val) {
      this.val = val
      this.questList = false
      this.$nextTick(() => {
        this.$refs.edit.getEditdetail()
      })
    },
    change() {
      this.questList = !this.questList
      this.val = null
    }
  }
}
</script>
<style  lang='scss' scoped>
.qusetion{
  padding: 1.25rem;
  background-color: #eaedf1;
}
.btn{
 background-color: #fff;
 padding: 1.25rem 1.25rem 0 0;
}
</style>
